<template>
  <div class="my">
    <div class="user">
      <div class="userInfo">
        <div class="le">
          <span class="title">{{ userInfo.nickname }}</span>
          <p class="slogan">{{ userInfo.intro }}</p>
        </div>
        <div class="ri">
          <img class="myimg" :src="userInfo.avatar" alt="" @click="jump" />
        </div>
      </div>
      <div class="data">
        <ul class="dataUl">
          <li>
            <div class="count">{{ userInfo.submitNum }}</div>
            <p>累计答题</p>
          </li>
          <li>
            <div class="count">{{ userInfo.collectQuestions.length }}</div>
            <p>收藏题目</p>
          </li>
          <li>
            <div class="count">{{ userInfo.errorNum }}</div>
            <p>我的错题</p>
          </li>
          <li>
            <div class="count">
              {{
                (
                  ((userInfo.submitNum - userInfo.errorNum) /
                    userInfo.submitNum) *
                  100
                ).toFixed(0) + '%'
              }}
            </div>
            <p>正确率</p>
          </li>
        </ul>
      </div>
      <div class="myjob">
        <van-cell
          title="我的岗位"
          :value="userInfo.position"
          isLink
          class="job"
        >
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #icon>
            <i class="iconfont iconicon_mine_gangwei jobIcon "></i>
          </template>
        </van-cell>
      </div>
    </div>
    <div class="other">
      <div class="face">
        <h3>面经数据</h3>
        <ul class="faceUl">
          <li>
            <div>
              昨日阅读<span class="blue"
                >+{{ userInfo.shareData.read.yesterday }}</span
              >
            </div>
            <div class="faceCount">{{ userInfo.shareData.read.total }}</div>
            <p class="total">阅读总数</p>
          </li>
          <li>
            <div>
              昨日获赞<span class="blue"
                >+{{ userInfo.shareData.star.yesterday }}</span
              >
            </div>
            <div class="faceCount">{{ userInfo.shareData.star.total }}</div>
            <p class="total">获赞总数</p>
          </li>
          <li>
            <div>
              昨日新增<span class="blue"
                >+{{ userInfo.shareData.comment.yesterday }}</span
              >
            </div>
            <div class="faceCount">
              {{ userInfo.shareData.comment.total }}
            </div>
            <p class="total">评论总数</p>
          </li>
        </ul>
      </div>
      <div class="more">
        <van-cell-group>
          <van-cell title="我的面经分享" value="166" isLink class="job">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <i class="iconfont iconbianzu2 jobIcon "></i>
            </template>
          </van-cell>
          <van-cell title="我的消息" value="166" isLink class="job">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <i class="iconfont iconicon_mine_xiaoxi jobIcon "></i>
            </template>
          </van-cell>
          <van-cell title="收藏的题库" value="166" isLink class="job">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <i class="iconfont iconicon_mine_tikushoucang jobIcon "></i>
            </template>
          </van-cell>
          <van-cell title="收藏的企业" value="166" isLink class="job">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <i class="iconfont iconicon_mine_qiyeshoucang jobIcon "></i>
            </template>
          </van-cell>
          <van-cell title="我的错题" value="166" isLink class="job">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <i class="iconfont iconicon_mine_cuoti jobIcon "></i>
            </template>
          </van-cell>
          <van-cell title="收藏的面试经验" value="166" isLink class="job">
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <template #icon>
              <i class="iconfont iconxingxing2 jobIcon "></i>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  created () {
    console.log(this.userInfo)
  },
  methods: {
    jump () {
      this.$router.push('/info')
    }
  }
}
</script>
<style lang="less">
.my {
  .jobIcon {
    font-size: 24px;
    margin-right: 15px;
  }
  font-size: 12px;
  .user {
    padding: 44px 18px 15px 15px;
    color: #fff;
    height: 216px;
    background-color: #c2002e;
    .userInfo {
      justify-content: space-between;
      display: flex;
      .title {
        font-size: 24px;
      }
      .slogan {
        color: #e690a4;
      }
      .myimg {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 4px solid #d55f7a;
        margin-right: 20px;
      }
    }
    .data {
      margin-top: 34px;
      .dataUl {
        display: flex;
        justify-content: space-around;
        text-align: center;
        .count {
          font-size: 24px;
        }
        p {
          color: #e690a4;
        }
      }
    }
    .myjob {
      margin-top: 20px;
      .job {
        border-radius: 10px;
      }
    }
  }
  .other {
    background-color: #f7f4f5;
    padding: 0 15px;
    padding-top: 20px;
    padding-bottom: 10px;
    .face {
      background-color: #fff;
      padding: 25px 0;
      color: #8e8fa1;
      border-radius: 15px;
      margin-bottom: 15px;
      h3 {
        color: #000;
        font-size: 18px;
        margin: 0;
        padding-left: 15px;
        margin-bottom: 10px;
      }
      .faceUl {
        display: flex;
        justify-content: space-around;
        text-align: center;
        .blue {
          color: #45cbe0;
        }
        .faceCount {
          color: #000;
          font-size: 20px;
          font-weight: 700;
          margin: 15px 0 15px 0;
        }
        .total {
          margin: 0;
        }
      }
    }
    .more {
      border-radius: 10px;
      margin-bottom: 60px;
    }
  }
}
</style>
